/*
与componentDidMount或componentDidUpdate不同，使用useEffect安排的效果不会阻止浏览器更新屏幕。 这使您的应用程序感觉更灵敏。 大多数效果不需要同步发生。 在不常见的情况下（例如测量布局），有一个单独的useLayoutEffect挂钩，其API与useEffect相同。

Unlike componentDidMount or componentDidUpdate, effects scheduled with useEffect don’t block the browser from updating the screen. This makes your app feel more responsive. The majority of effects don’t need to happen synchronously. In the uncommon cases where they do (such as measuring the layout), there is a separate useLayoutEffect Hook with an API identical to useEffect.
*/
/*
其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect
可以使用它来读取 DOM 布局并同步触发重渲染
在浏览器执行绘制之前useLayoutEffect内部的更新计划将被同步刷新
尽可能使用标准的 useEffect 以避免阻塞视图更新
*/
import React, {useEffect, useState, useLayoutEffect} from 'react';

export default function(){
  console.log('function render1');
  const [color, setColor] = useState('red');
  useEffect(() => {
    console.log('useEffect当前的颜色:', color)
  });

  //↓会先于 useEffect 执行,并且此时页面还没有真正渲染,只是回流(Layout布局计算)完毕(还没有开始进行重绘),即还没有真正渲染到屏幕上
  useLayoutEffect(() => {
    console.log('useLayoutEffect当前的颜色:', color); //你会发现此时还没有真正渲染 但color已经改变
    //@ts-ignore
    alert('useLayoutEffect当前的颜色:', color)
  });

  console.log('function render2');

  /*
    function render1
    function render2
    useLayoutEffect当前的颜色: red
    useEffect当前的颜色: red
  */

  return (
    <>
      <div id="myDiv" style={{backgroundColor:color}}>颜色</div>
      <button onClick={()=>setColor('red')}>红</button>
      <button onClick={()=>setColor('yellow')}>黄</button>
      <button onClick={()=>setColor('blue')}>蓝</button>
    </>
  )
}

